<script lang="ts">
  import { uploadImage } from '@/api/upload';
  import { defineComponent, PropType } from '@vue/composition-api';

  type PropsType = {
    src: string;
  };
  export default defineComponent({
    props: {
      src: {
        type: String as PropType<PropsType['src']>,
        default: ''
      }
    },
    setup(_, { emit }) {
      function uploadAvatar() {
        uni.chooseImage({
          count: 1,
          success(files) {
            const filePath = typeof files.tempFilePaths === 'string' ? files.tempFilePaths : files.tempFilePaths[0];
            uploadImage(filePath).then((res) => {
              emit('input', res.data.url);
            });
          }
        });
      }
      return {
        uploadAvatar
      };
    }
  });
</script>

<template>
  <view class="oto-avatar">
    <image @click.stop="uploadAvatar" :src="src" />
  </view>
</template>

<style lang="scss" scoped>
  .oto-avatar {
    width: 64rpx;
    height: 64rpx;

    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
</style>
